<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>云借阅-图书管理系统</title>
    <!-- Google fonts -->
    <link href="http://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- Template CSS Style link -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style-starter.css">
</head>

<body>
    <!-- header -->
    <header id="site-header" class="fixed-top">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="index.html"><i class="fas fa-graduation-cap"></i>云借阅
                </a>
                <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
                    <span class="navbar-toggler-icon fa icon-close fa-times"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarScroll">
                    <ul class="navbar-nav ms-auto my-2 my-lg-0 navbar-nav-scroll">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="${pageContext.request.contextPath}/admin/index1.jsp">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${pageContext.request.contextPath}/admin/login.jsp">新书推荐</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${pageContext.request.contextPath}/admin/login.jsp">阅读排行</a>
                        </li><li class="nav-item">
                            <a class="nav-link" href="${pageContext.request.contextPath}/admin/login.jsp">管理公告</a>
                        </li><li class="nav-item">
                            <a class="nav-link" href="${pageContext.request.contextPath}/admin/login.jsp">联系我们</a>
                        </li>
                    </ul>
                    <!-- search-right -->
                    <div class="header-search position-relative">
                        <div class="search-right mx-lg-2">
                            <a href="#search" class="btn search-btn p-0" title="search">
                                <i class="fas fa-search"></i></a>
                            <!-- search popup -->
                            <div id="search" class="pop-overlay">
                                <div class="popup">
                                    <form action="#search" method="GET" class="search-box">
                                        <input type="search" placeholder="Enter Keyword..." name="search"
                                            required="required" autofocus="">
                                        <button type="submit" class="btn"><span class="fas fa-search"
                                                aria-hidden="true"></span></button>
                                    </form>
                                </div>
                                <a class="close" href="#close">×</a>
                            </div>
                            <!-- //search popup -->
                        </div>
                    </div>
                    <!--//search-right-->
                </div>
                <!-- toggle switch for light and dark theme -->
                <div class="cont-ser-position">
                    <nav class="navigation">
                        <div class="theme-switch-wrapper">
                            <label class="theme-switch" for="checkbox">
                                <input type="checkbox" id="checkbox">
                                <div class="mode-container">
                                    <i class="gg-sun"></i>
                                    <i class="gg-moon"></i>
                                </div>
                            </label>

                        </div>
                    </nav>
                </div>
                <!-- //toggle switch for light and dark theme -->
            </nav>
        </div>
    </header>
    <!-- //header -->

    <!-- banner section -->
    <section id="home" class="w3l-banner py-5">
        <div class="banner-content">
            <div class="container py-4">
                <div class="row align-items-center pt-sm-5 pt-4">
                    <div class="col-md-6">
                        <h3 class="mb-lg-4 mb-3">图书管理系统<span class="d-block"></span>
                        </h3>
                        <p class="banner-sub">让阅读变得方便起来</p>
                        <div class="d-flex align-items-center buttons-banner">
                            <a href="${pageContext.request.contextPath}/admin/login.jsp" class="btn btn-style mt-lg-5 mt-4">了解详情</a>
                        </div>
                    </div>
                    <div class="col-md-6 right-banner-2 text-end position-relative mt-md-0 mt-5">
                        <div class="sub-banner-image mx-auto"><br><br><br><br><br>
                            <img src="img/111.jpg" class="img-fluid position-relative" alt=" ">
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //banner section -->

    <!-- home 4grids block -->
    <section class="services-w3l-block py-5" id="features">
        <div class="container py-md-5 py-4">
            <div class="title-main text-center mx-auto mb-md-5 mb-4" style="max-width:500px;">
                <p class="text-uppercase">云阅读</p>
                <h3 class="title-style">拥有最多最细分的图书</h3>
            </div>
            <div class="row">
                <div class="col-md-6 col-lg-3 d-flex align-items-stretch">
                    <div class="icon-box icon-box-clr-1">
                        <div class="icon"><i class="fas fa-user-friends"></i></div>
                        <h4 class="title"><a href="${pageContext.request.contextPath}/admin/login.jsp">读者好评</a></h4>
                        <p>大量读者对此称赞好评</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 d-flex align-items-stretch mt-md-0 mt-4">
                    <div class="icon-box icon-box-clr-2">
                        <div class="icon"><i class="fas fa-book-reader"></i></div>
                        <h4 class="title"><a href="${pageContext.request.contextPath}/admin/login.jsp">优质图书</a></h4>
                        <p>吸收更精华的知识</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 d-flex align-items-stretch mt-lg-0 mt-4">
                    <div class="icon-box icon-box-clr-3">
                        <div class="icon"><i class="fas fa-user-graduate"></i></div>
                        <h4 class="title"><a href="${pageContext.request.contextPath}/admin/login.jsp">开心学习</a></h4>
                        <p>可以与其他学者交流心得</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 d-flex align-items-stretch mt-lg-0 mt-4">
                    <div class="icon-box icon-box-clr-4">
                        <div class="icon"><i class="fas fa-university"></i></div>
                        <h4 class="title"><a href="${pageContext.request.contextPath}/admin/login.jsp">拉近距离</a></h4>
                        <p>使知识触手可及</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- home 4grids block -->

    <!-- home image with content block -->
    <section class="w3l-servicesblock pt-lg-5 pt-4 pb-5 mb-lg-5" id="about">
        <div class="container pb-md-5 pb-4">
            <div class="row pb-xl-5 align-items-center">
                <div class="col-lg-6 position-relative home-block-3-left pb-lg-0 pb-5">
                    <div class="position-relative">

                    </div>
                    <div class="imginfo__box">
                        <h6 class="imginfo__title">电子图书馆好处多多：</h6>
                        <p>
                            1.节约资源,减少环境破坏。电子图书实现了无纸化出版,我们通过网络来阅读,这就减少了因造纸、印刷等带来的资源损耗,节约了自然资源和社会资源,从而有利于对环境的保护和资源的节约。
                            2.信息密度和存储量大,并且不易绝版和毁坏。电子图书的维护和存放比较简易,可以通过网络得到轻松的传输,而且不会像纸质图书那样出现绝版和毁坏等问题。
                            3.具有声音、动画等多媒体的呈现方式。电子图书不仅可以提供像纸质图书那样的静态的文字和图画,它还可以在此基础上以多媒体的方式呈现声音、动画等信息,使得读书具有更多的趣味。

 </p>
                        <a href="${pageContext.request.contextPath}/admin/login.jsp"><i class="fas fa-phone-alt"></i> 1-111-111-111</a>
                    </div>
                </div>
                <div class="col-xl-5 col-lg-6 offset-xl-1 mt-lg-0 mt-5 pt-lg-0 pt-5">
                    <h3 class="title-style">云阅读</h3>
                    <p class="mt-4">致力于让更多的读者都能更快更方便的看到自己想要阅读的书，查找到想要的资料</p>
                    <ul class="mt-4 list-style-lis pt-lg-1">
                        <li><i class="fas fa-check-circle"></i>快速

 成功教育</li>
                        <li><i class="fas fa-check-circle"></i>高效</li>
                        <li><i class="fas fa-check-circle"></i>广泛</li>
                    </ul>
                    <a href="${pageContext.request.contextPath}/admin/login.jsp" class="btn btn-style mt-5">联系我们</a>
                </div>
            </div>
        </div>
    </section>



    <footer class="w3l-footer-29-main">
        <div class="footer-29 pt-5 pb-4">
            <div class="container pt-md-4">
                <div class="row footer-top-29">
                    <div class="col-lg-4 col-md-6 footer-list-29">
                        <h6 class="footer-title-29">信息 </h6>
                        <p class="mb-2 pe-xl-5">我们也是学生啦
                        </p>
                        <p class="mb-2">电话号码 : <a href="">+86-1111111</a></p>
                        <p class="mb-2">邮箱地址 : <a href="${pageContext.request.contextPath}/admin/login.jsp">zhaobudao.qq.com</a></p>
                    </div>
                    <div class="col-lg-2 col-md-3 col-6 footer-list-29 mt-md-0 mt-4">
                        <ul>
                            <h6 class="footer-title-29">关于我们</h6>
                            <li><a href="">优质图书</a></li>
                            <li><a href="">服务宗旨</a></li>
                            <li><a href="">图书质量</a></li>
                            <li><a href="">品牌价值</a></li>

                        </ul>
                    </div>
                    <div class="col-lg-2 col-md-3 col-6 ps-lg-5 ps-lg-4 footer-list-29 mt-md-0 mt-4">
                        <ul>
                            <h6 class="footer-title-29">其他服务</h6>
                            <li><a href="#blog">APP下载</a></li>
                            <li><a href="#privacy">线下借阅</a></li>
                            <li><a href="${pageContext.request.contextPath}/admin/login.jsp">资源共享</a></li>
                            <li><a href="#license">投诉信箱</a></li>

                        </ul>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-8 footer-list-29 mt-lg-0 mt-4 ps-lg-5">

                        <form action="#" class="subscribe d-flex" method="post">
                            <input type="email" name="email" placeholder="你的联系方式" required="">
                            <button class="button-style"><span class="fa fa-paper-plane"
                                    aria-hidden="true"></span></button>
                        </form>
                        <p class="mt-3">你可以在此处留下你的联系方式<br>我们后续会与你取得联系</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>